<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import { read, readInfo } from '@/apis/message';


let state = reactive({
  messageDetails: {},
  detailsId: '', //详情id
  detailsType: '' //详情类型
})

// 消息已读
const getRead = async () => {
  let params = {
    id: state.detailsId //查询接口-list中的单条对象id
  }
  let { rows, code } = await read(params);
  //console.log(rows, code);
}

// 消息详情
const getReadInfo = async () => {
  let params = {
    id: state.detailsId //查询接口-list中的单条对象id
  }
  let { data, code } = await readInfo(params);
  if (code == '200') {
    state.messageDetails = data
  }
  //console.log(data, code);
}

onLoad((option: any) => {
  //console.log(option);
  state.detailsId = option.id ?? '';
  state.detailsType = option.flag ?? '';
  if (state.detailsType == '0') {
    getRead()
  }
  getReadInfo()
})

</script>
<template>
  <view class="body-box">
    <view class="details-box">
      <view class="top-box">
        <view class="title-text">{{ state.messageDetails.title }}</view>
        <view class="time-text">消息时间：{{ state.messageDetails.createTime }}</view>
      </view>
      <view class="content-text">{{ state.messageDetails.content }}</view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.body-box {
  padding-top: 24rpx;
  box-sizing: border-box;
}

.details-box {
  padding: 20rpx 0;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 1);
  margin: 24rpx 20rpx;
  border-radius: 30rpx;
  .top-box {
    padding: 0 30rpx;
  }

  .title-text {
    margin-bottom: 10px;
    color: rgba(16, 16, 16, 1);
    font-size: 32rpx;
    font-weight: bold;
  }

  .time-text {
    color: rgba(190, 190, 190, 1);
    font-size: 24rpx;
  }

  .content-text {
    margin-top: 20rpx;
    padding: 20rpx 30rpx 0;
    border-top: 1px solid rgba(239, 239, 239, 1);
    color: rgba(108, 108, 108, 1);
    font-size: 28rpx;
  }
}
</style>
